'use client';
import VectorForm from '@/components/vectorForm';
import http, { baseUrl } from '@/lib/request';
import React from 'react';
import { useState } from 'react';

// 自定义图标组件
const StarIcon = () => (
  <svg className="w-5 h-5 text-yellow-500" fill="currentColor" viewBox="0 0 24 24">
    <path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z" />
  </svg>
);

const LikeIcon = () => (
  <svg className="w-5 h-5 text-red-500" fill="currentColor" viewBox="0 0 24 24">
    <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" />
  </svg>
);

const MessageIcon = () => (
  <svg className="w-5 h-5 text-blue-500" fill="currentColor" viewBox="0 0 24 24">
    <path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z" />
  </svg>
);

// 图标文本组件
const IconText = ({ icon: Icon, text }: { icon: React.FC; text: string }) => (
  <div className="flex items-center space-x-1">
    <Icon />
    <span>{text}</span>
  </div>
);
let controller = null;
interface Res {
	distance: number;
	id: number;
	name: string;
	txt: string;
}
const Vector: React.FC = () => {
	const [data, setData] = useState<Res[]>([]);
	const getData = async (form: FormData) => {
		console.log(form);
		controller = new AbortController();
		const res: any = await http.post(`/perf/vec/search`, form, {
			signal: controller.signal,
		});
		if (res.code == 200) {
			setData(res.data);
		}
	};
	return (
		<div className="vector h-screen mx-4 sm:mx-8 md:mx-16 lg:mx-24 bg-gray-200 ">
			<div className="top h-auto sm:h-40 bg-white py-2 sm:py-1">
				<VectorForm changeSearch={getData}></VectorForm>
			</div>
			<div className="bottom overflow-auto">
				<div className="space-y-4 p-4">
					{data.map((item) => (
						<div key={item.id} className="bg-white rounded-lg shadow-sm p-4">
							<div className="flex flex-col md:flex-row items-start md:items-center space-y-4 md:space-y-0 md:space-x-4">
								{/* Avatar */}
								<div className="flex-shrink-0">
									<img
										className="w-10 h-10 rounded-full object-cover"
										alt="avatar"
										src={`https://lizhan.fun/download/save/data/${item.name}.jpg`}
									/>
								</div>
								
								{/* Content */}
								<div className="flex-grow">
									<h3 className="text-lg font-semibold mb-1">
										<a 
											href={`https://lizhan.fun/download/save/data/${item.name}.jpg`}
											className="text-blue-600 hover:text-blue-800"
										>
											{item.name} -- {item.distance}
										</a>
									</h3>
									<p className="text-gray-600 mb-4">{item.txt}</p>
									
									{/* Actions */}
									<div className="flex space-x-6">
										<IconText icon={StarIcon} text="156" />
										<IconText icon={LikeIcon} text="156" />
										<IconText icon={MessageIcon} text="2" />
									</div>
								</div>
								
								{/* Extra Image */}
								<div className="flex-shrink-0">
									<img
										className="w-32 h-auto rounded"
										alt="extra"
										src={`https://lizhan.fun/download/save/data/${item.name}.jpg`}
									/>
								</div>
							</div>
						</div>
					))}
				</div>
			</div>
		</div>
	);
};
export default Vector;
